<template>
      <div class="line_box" ref="echartDom"></div>
  </template>
  
  <script setup lang="ts">
  import { Bottom } from "@element-plus/icons-vue/dist/types";
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,watchEffect,defineEmits  } from "vue";
  
  // 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
  const emit = defineEmits(['barPiemagnify'])
// 字体自适应方法
const pxToRem = (px: number) => {
  const scale = document.documentElement.clientWidth / 1920;
  return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendData = props.housingSupplyStatsData.legendData;
let xAxisData = props.housingSupplyStatsData.xAxisData;
let yAxisData = props.housingSupplyStatsData.yAxisData;
let seriesData = props.housingSupplyStatsData.seriesData;
let colors = props.housingSupplyStatsData.colors;
let typeData = props.housingSupplyStatsData.typeData;

//数据归一化
let nums:number = 0;
seriesData.forEach(i => {
nums += i.value
});

const getEchart = () => {
  if (echartDom.value) {
  myChart.value = echarts.init(echartDom.value);
  const option = {
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "rgba(40,252,255,0.6)",
        shadowBlur: 10,
        shadowColor: "rgba(0, 0, 0, 0.9)",
      },
    },
    textStyle: {
      color: "#fff",
      fontSize: pxToRem(15),
    },
    backgroundColor: "rgba(8, 64, 132, 0.9)",
    borderColor:'#fff',
  },
  legend: {
    orient: 'horizontal',//horizontal水平显示
    left:pxToRem(0),
    itemWidth: pxToRem(15),
    itemHeight: pxToRem(8),
    itemGap: pxToRem(6),
    textStyle: {
      color: "#fff",
      fontSize: pxToRem(10),
      rich: {},
      padding: [0, 0, pxToRem(-3), 0],
    }, 
  },
  color:colors,
  backgroundColor: 'rgba(0,0,0,0)',
  series: [
  {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      minAngle: pxToRem(10),
      padAngle: pxToRem(5),
      itemStyle: {
      borderRadius: pxToRem(5),
      },
      label: {
      show: false,
      position: 'center'
      },
      emphasis: {
      },
      labelLine: {
      show: false
      },
      data:seriesData
    }
  ]

    };
    myChart.value.setOption(option);
    myChart.value.on("click", (params) => {
      emit('barPiemagnify',props.housingSupplyStatsData)
    });
  }
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  legendData = props.housingSupplyStatsData.legendData;
  xAxisData = props.housingSupplyStatsData.xAxisData;
  yAxisData = props.housingSupplyStatsData.yAxisData;
  seriesData = props.housingSupplyStatsData.seriesData;
  colors = props.housingSupplyStatsData.colors;
  typeData = props.housingSupplyStatsData.typeData;
  getEchart();
};

watchEffect(() => {
updateChart();
});
onMounted(() => {
getEchart();
window.addEventListener("resize", () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
  if (myChart.value) {
    myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
  }
});
});
</script>

<style scoped lang="less">
</style>
  